import React from 'react';
import { connect } from 'dva';
import { Form, Input, Button } from 'antd';
import styles from './Operation.css';

const FormItem = Form.Item;

class PriceInput extends React.Component {
  constructor(props) {
    super(props);
    const value = this.props.value || {};
    this.state = {
      number: value.number || 0,
    };
  }
  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }
  handleNumberChange = (e) => {
    const number = parseInt(e.target.value || 0, 10);
    if (isNaN(number)) {
      return;
    }
    if (!('value' in this.props)) {
      this.setState({ number });
    }
    this.triggerChange({ number });
  }
  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue));
    }
  }
  onChange = (value) => {
    this.setState({ number: value });
  }
  render() {
    const { size } = this.props;
    const state = this.state;
    return (
      <span>
        <Input
          type="text"
          size={size}
          value={state.number}
          onChange={this.handleNumberChange}
          style={{ width: '65%', marginRight: '3%' }}
        />
      </span>
    );
  }
}

class handle extends React.Component {
  constructor(props) {
    super(props);
  }

  handleSubmit = (e) => {
    e.preventDefault();
    const roomNum = this.props.roomnum;
    const userName = this.props.username;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
        const price = values.price.number;
        this.props.dispatch({
          type: 'room/bet',
          payload: { roomNum, price, userName },
        });
      }
    });
  }

  checkPrice = (rule, value, callback) => {
    if (value.number > 0) {
      callback();
      return;
    }
    callback('Price must greater than zero!');
  }

  deal=() => {
    const roomNum = this.props.roomnum;
    const userName = this.props.username;
    this.props.dispatch({
      type: 'room/discard',
      payload: { roomNum, userName },
    });
  }

  call = () => {
    const roomNum = this.props.roomnum;
    const userName = this.props.username;
    this.props.dispatch({
      type: 'room/call',
      payload: { roomNum, userName },
    });
  }

  disab = () => {
    if (this.props.data) {
      return '';
    }
    return 'disabled';
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form layout="inline" onSubmit={this.handleSubmit} className={styles.root}>
        <FormItem>
          <Button type="danger" onClick={this.deal} disabled={this.disab()}>Fold</Button>
          <Button type="primary" onClick={this.call} disabled={this.disab()}>Call</Button>
          <Button type="primary" htmlType="submit" disabled={this.disab()}>Release</Button>
        </FormItem>
        <FormItem >
          {getFieldDecorator('price', {
            initialValue: { number: 1 },
            rules: [{ validator: this.checkPrice }],
          })(<PriceInput />)}
        </FormItem>

      </Form>
    );
  }
}

const Operation = Form.create()(handle);
export default Operation;
